<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <template v-for="item in types">
            <div>
                <input type="radio" v-model="selectItem" :value="item"><label for="">{{item}}</label>
            </div>
        </template>
            <div v-if= "selectItem==='萌宠'">
                <show :showall="series.pet"></show>
                <!-- <template>
                    <div v-for="pet in series.pet">
                        <img :src="pet" alt="">
                    </div>
                </template> -->
            </div>
            <div v-else-if="selectItem==='风景'">
                <!-- <template>
                    <div v-for="scenery in series.scenery">
                        <img :src="scenery" alt="">
                    </div>
                </template> -->
                <show :showall="series.scenery"></show>
            </div>
            <div v-else-if="selectItem==='汽车'">
                <!-- <template>
                    <div v-for="car in series.car">
                        <img :src="car" alt="">
                    </div>
                </template> -->
                <show :showall="series.car"></show>
            </div>
            <!-- <show :showall="series.pet"></show> -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.component("show", {
                props: ["showall"],
                template: ` 
                <div>
                 <div v-for="showall in showall">
                    <img :src="showall" alt="">
                </div>
                </div>
            `
            })
const app = new Vue({
    el: "#app",
    data: {
        selectItem: "萌宠",
        types: ['萌宠', '风景', '汽车'],
        series: {
            pet: ["https://img0.baidu.com/it/u=2154503972,3428051834&fm=26&fmt=auto&gp=0.jpg", "https://img2.baidu.com/it/u=3137646855,2454399309&fm=26&fmt=auto&gp=0.jpg"],
            scenery: ["https://img1.baidu.com/it/u=1605489254,3208869051&fm=26&fmt=auto&gp=0.jpg", "https://img1.baidu.com/it/u=3593645114,3563539419&fm=26&fmt=auto&gp=0.jpg"],
            car: ["https://img0.baidu.com/it/u=155715894,1100584632&fm=26&fmt=auto&gp=0.jpg", "https://img1.baidu.com/it/u=3161057015,1042861478&fm=26&fmt=auto&gp=0.jpg"]
        }
    }
})
    </script>
</body>

</html>